<template>
    <view>
        <NavBar :title="'残疾人身份证'" />
        <scroll-view scroll-y="true" class="scroll-Y">
            <!-- 姓名 -->
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">残疾人身份证人像面</text>
                    <text class="icon">*</text>
                </view>
                <u-upload
                    :fileList="form.fileList"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="1"
                    multiple
                    :maxCount="9"
                    :previewFullImage="true"
                >
                    <u-button class="btn btn-upload" text="上传图片"></u-button>
                </u-upload>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">残疾人身份证国徽面</text>
                </view>
                <u-upload
                    :fileList="form.fileList"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="1"
                    multiple
                    :maxCount="9"
                    :previewFullImage="true"
                >
                    <u-button class="btn btn-upload" text="上传图片"></u-button>
                </u-upload>
            </view>
            <view class="uni-form-item ele-column">
                <view class="title">
                    <text class="content"></text>
                </view>
                <u-button class="btn ele-btn" text="获取电子证照"></u-button>
            </view>
        </scroll-view>
        <view class="but">
            <view class="submit" @click="submitClick">提交</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                name: '',
                household: '',
                phone: '',
                fileList: []
            }
        };
    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        },
        // 提交表单
        submitClick() {
            console.log('提交表单');
            this.$u.toast('提交成功');
            this.$u.route({
                url: '/pages/fromTable/disabled/index'
            });
        },
        async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file);
            let fileList = this.form.fileList;
            let fileListLen = fileList.length;
            lists.map((item) => {
                fileList.push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                });
            });
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url);
                let item = fileList[fileListLen];
                fileList.splice(
                    fileListLen,
                    1,
                    Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    })
                );
                fileListLen++;
            }
        },
        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
                    filePath: url,
                    name: 'file',
                    formData: {
                        user: 'test'
                    },
                    success: (res) => {
                        setTimeout(() => {
                            resolve(res.data.data);
                        }, 1000);
                    }
                });
            });
        },
        // 删除图片
        deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1);
        }
    }
};
</script>

<style lang="scss" scoped>
.scroll-Y {
    width: 100%;
    padding: 46rpx 0;
    height: calc(100vh - 369rpx);
    background-color: #fff;
    font-family: PingFang SC, PingFang SC;
    .uni-column {
        font-weight: 400;
        font-size: 31rpx !important;
        color: rgba(0, 0, 0, 0.8);
        padding: 15rpx 0;
        width: 90%;
        margin: 0 auto;
        border-bottom: 1rpx solid #d0d3d6;
    }
    .title {
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        .icon {
            font-weight: 400;
            font-size: 27rpx;
            color: #dc0000;
            margin-left: 8rpx;
        }
        .content {
            font-weight: 400;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.6);
        }
    }
}
.btn {
    width: 120px;
    margin: auto 0;
}
.btn-upload {
    background: #2c5e9f;
    color: #ffffff;
    border-radius: 4px 4px 4px 4px;
}
.ele-column {
    font-weight: 400;
    font-size: 31rpx !important;
    color: rgba(0, 0, 0, 0.8);
    padding: 15rpx 0;
    width: 90%;
    margin: 0 auto;
}
.ele-btn {
    background: rgba(187, 187, 187, 0.38);
    border-radius: 4px 4px 4px 4px;
    border: none;
}
.but {
    padding-top: 15rpx;
    background-color: #ffffff;
    border-top: 1rpx solid #d0d3d6;
    .submit {
        margin: 0 auto;
        width: 688rpx;
        height: 92rpx;
        background: #2c5e9f;
        border-radius: 8rpx;
        font-weight: 400;
        font-size: 29rpx;
        color: #ffffff;
        line-height: 92rpx;
        text-align: center;
    }
}
</style>
